<template>
  <basic-container style="height: 96%">
    <avue-form ref="properties" v-model="form" :option="option" style="margin-top: 20px">
      <template slot-scope="{}" slot="radio">
        <avue-radio v-model="form.objectType" :dic="dic" @click="handleClick"></avue-radio>
      </template>
    </avue-form>
    <div class="footer">
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="submit" v-preventReClick>提 交</el-button>
      <el-button size="small" icon="el-icon-circle-close" @click="cancel">取 消</el-button>
    </div>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </common-modal-template>
  </basic-container>
</template>

<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import { templateSubmit, getDetail } from '@/api/quality/quality-template-manage';
export default {
  components: {
    CommonModalTemplate
  },
  data() {
    return {
      dic: [
        {
          label: '物料类型',
          value: 'PART_CATEGORY'
        },
        {
          label: '物料',
          value: 'PART_MASTER'
        }
      ],
      form: {
        objectType: 'PART_CATEGORY'
      },
      tableOption: {},
      timer: new Date().getTime(),
      option: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: '130',
        column: [
          {
            label: '模板类型',
            prop: 'type',
            // type: 'select',
            span: 8,
            disabled: true
            // dicUrl: '/api/blade-system/dict/dictionary?code=QC',
            // props: {
            //   label: 'dictValue',
            //   value: 'dictKey'
            // }
          },
          {
            label: '检验模板名称',
            prop: 'name',
            span: 8,
            disabled: true
          }
        ],
        group: [
          {
            label: '对象类型',
            prop: 'name',
            icon: 'el-icon-vertical-bar',
            column: [
              {
                label: '',
                prop: 'radio',
                labelWidth: 10,
                formslot: true
              }
            ]
          },
          {
            label: '选择对象',
            prop: 'name',
            icon: 'el-icon-vertical-bar',
            column: [
              {
                label: '选择对象',
                prop: 'selectObject',
                type: 'search',
                height: 50,
                rules: [
                  {
                    required: true,
                    message: '请选择选择对象',
                    trigger: 'blur'
                  }
                ],
                appendClick: () => {
                  if (this.form.objectType === 'PART_MASTER') {
                    this.openPartModal();
                  } else {
                    this.openPartTypeModal();
                  }
                }
              }
            ]
          },
          {
            label: '设置',
            prop: 'name',
            icon: 'el-icon-vertical-bar',
            column: [
              {
                label: '是否默认',
                prop: 'isDefault',
                type: 'switch',
                value: false
              }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    let query = this.$route.query;
    query.name = decodeURI(query.templateIdName);
    query.code = decodeURI(query.code);
    this.form = query;
  },
  methods: {
    submit() {
      this.$refs.properties.validate((valid, done) => {
        if (valid) {
          let params = {
            id: this.form.templateId,
            code: this.form.code,
            name: this.form.name,
            type: this.form.type,
            objectIdList: this.form.objectIdList,
            objectType: this.form.objectType,
            isDefault: this.form.isDefault
          };
          templateSubmit(params).then((res) => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.$router.go(-1);
          });
        }
      });
    },
    cancel() {
      this.$router.go(-1);
    },
    getSelectedRows(rowData, title) {
      let names = this._map(rowData, (item) => {
        return item.name;
      });
      this.form.objectIdList = this._map(rowData, (item) => {
        return item.id;
      });
      switch (title) {
        case 'part':
          this.form.selectObject = String(names);
          break;
        case 'partType':
          this.form.selectObject = String(names);
          break;
        default:
          break;
      }
    },
    handleClick() {
      this.form.selectObject = '';
    },
    /**
     * 重新加载公用表格弹窗组件
     */
    newKey() {
      this.timer = new Date().getTime();
    },
    openPartTypeModal() {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '物料信息',
        url: '/api/mes-admin/partcategory/lazy-list',
        isPage: true,
        lazy: true, // 懒加载
        titleInfo: 'partType',
        rowSelectionType: 'multiple',
        columnDefs: [
          {
            label: '类型编码',
            prop: 'code',
            search: true
          },
          {
            label: '类型名称',
            prop: 'name',
            search: true
          }
        ]
      };
    },
    openPartModal() {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '物料信息',
        url: '/api/mes-admin/part-master/page',
        isPage: true,
        titleInfo: 'part',
        rowSelectionType: 'multiple',
        columnDefs: [
          {
            label: '类型',
            prop: 'partType',
            type: 'search',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dicUrl: '/api/blade-system/dict/dictionary?code=part_type',
            search: true
          },
          {
            label: '物料编码',
            prop: 'partNo',
            search: true
          },
          {
            label: '物料名称',
            prop: 'name',
            search: true
          },
          {
            label: '型号',
            prop: 'partModel'
          }
          // {
          //   label: '检验方式',
          //   prop: 'inspectionMode',
          //   type: 'select',
          //   props: {
          //     label: 'dictValue',
          //     value: 'dictKey'
          //   },
          //   dicFormatter: (res) => {
          //     return res.data;
          //   },
          //   dicUrl: '/api/blade-system/dict/dictionary?code=inspection_mode'
          // }
        ]
      };
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .avue-view {
  height: 96% !important;
}
::v-deep .el-card {
  height: 100% !important;
}

.footer {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
}
</style>
